<template>
    <div class="filter-group">
        <el-form>
            <el-row :gutter="24">

                <!-- filters -->
                <el-col 
                    v-for="(filter, i) in filters"
                    :key="i"
                    :span="6"
                >
                    <el-form-item :label="filter.label">
                        <!-- to do -->
                        <component 
                            :is="filter.type" 
                            v-bind="filter.props"
                            v-model="filter.vModel"
                        >
                            <!-- 对select特殊处理 -->
                            <template v-if="filter.type === 'el-select'">
                                <el-option
                                    v-for="(opt, o) in filter.props.options"
                                    :key="o"
                                    :label="opt.label"
                                    :value="opt.value"
                                />
                            </template>
                        </component>
                    </el-form-item>
                </el-col>

                <!-- btns -->
                <el-col :span="6">
                    <el-button 
                        v-for="(btn, i) in btns"
                        :key="i"
                        v-bind="btn.props"
                        @click="() => btn.onClick( getParams() )"
                    >
                        {{ btn.name }}
                    </el-button>
                </el-col>

            </el-row>

        </el-form>
    </div>
</template>

<script>
// vue3独有 composition-api
import { defineComponent } from 'vue';

export default defineComponent({
    // vue3独有
    setup (props) {
        // props不能解构
        // console.log(...props);
    },
    methods: {
        getParams () {
            const result = {};
            for (const filter of this.filters) {
                result[ filter.dataField ] = filter.vModel;
            }
            return result;
        },
    },
    props: {
        filters: Array, // 数据维护在这 分散在filters数组中 但是想要的params是要给对象
        btns: Array,
    },
    
})
</script>
